<template>
  <div v-if="shoppingList.recipe.major.length > 0" class="shoppingList2">
    <div class="lists">
      <ShoppingListItem
        v-for="(m, index) in shoppingList.recipe.major"
        :key="index"
        :m="m"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import ShoppingListItem from "@/components/ShoppingListItem.vue";
import axios from "axios";
import { onMounted, ref } from "vue";

const props = defineProps(["item"]);

const shoppingList = ref({
  recipe: {
    major: [
      {
        title: "",
        note: "",
      },
    ],
    photo_path: "",
    title: "",
  },
});

onMounted(async () => {
  // console.log(props.item);

  let res = await axios.get(
    `https://apis.netstart.cn/douguo/recipe/detail/${props.item}`
  );
  // console.log(res.data.result);
  shoppingList.value = res.data.result;
});
</script>

<style lang="scss" scoped>
.shoppingList2 {
  // margin-bottom: 25px;
  padding: 0 16px;
}
</style>
